<template>
    <div style="height:100%">
        <chart :options="pies" :init-options="initOptions" autoresize></chart>
    </div>
</template>

<script>
import ECharts from '@/components/echarts/ECharts.vue'
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/radar'
export default {
    name:'recordEcharts',
    components:{
        chart:ECharts
    },
    props:{
        courseNameList:{
            type:Array,
            default:() => {
                return []
            }
        },
        courseNumberList:{
            type:Array,
            default:() => {
                return []
            }
        },
        classCourseAverageList:{
            type:Array,
            default:() => {
                return []
            }
        }
    },
    data(){
        return {
            initOptions: {
                renderer: 'canvas'
            },
            pie:{
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['班级平均', '个人表现']
                },
                color:['#128FEF','#FF0000'],
                radar: {
                    //标题样式
                    name: {
                        textStyle: {
                            color: '#000',
                            fontSize:14,
                            fontWeight:600
                        }
                    },
                    //背景色
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(18, 143, 239, 0.06)'],
                        }
                    },
                    //线条色
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(18, 143, 239, 0.15)'
                        }
                    },
                    //线条色
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(18, 143, 239, 0.15)'
                        }
                    },
                    indicator: [
                        { name: '专业水平'},
                        { name: '社会实践'},
                        { name: '表达能力'},
                        { name: '实战能力'},
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [
                        {
                            value: [0, 0, 0, 0],
                            name: '班级平均',
                            areaStyle: {
                                color: 'rgba(18, 143, 239, 0.1)'
                            }
                        },
                        {
                            value: [0, 0, 0, 0],
                            name: '个人表现',
                            areaStyle: {
                                color: 'rgba(255, 0, 0, 0.1)'
                            }
                        }
                    ]
                }]
            }
        }
    },
    computed:{
        pies(){
            var pie = JSON.parse(JSON.stringify(this.pie));
            if(this.courseNameList.length > 0){
                pie.radar.indicator = this.courseNameList;
            }
            if(this.classCourseAverageList.length > 0){
                pie.series[0].data[0].value = this.classCourseAverageList;
            }
            if(this.courseNumberList.length > 0){
                pie.series[0].data[1].value = this.courseNumberList;
            }
            return pie
        }
    }
}
</script>


